<template>
  <div class="addBox">
    <h1 class="title">{{route.query.id === "" ? "添加" : "修改"}}文章</h1>
    <div class="btnBox">
      <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
      <el-button @click="back">返回</el-button>
    </div>
    <!--表单-->
    <div class="bookTop">
      <div class="topInput">
        <span>文章名：</span>
        <el-input v-model.trim="article.name" placeholder="这里填文章名" clearable />
      </div>
      <div class="topInput">
        <span>类别：</span>
        <el-input v-model.trim="article.category" placeholder="这里写文章类别" clearable />
      </div>
    </div>
    <!--正文-->
    <Editor
      title="正文"
      placeholder="内容填在这里!"
      :content="article.content"
      @getContent="setContent"
    />
  </div>
</template>

<script setup>
  import {useRoute,useRouter} from "vue-router"
  import {onBeforeMount,reactive,ref} from "vue"
  import {ElMessage} from "element-plus";
  import {http} from "../config/axios/index.js"
  import Editor from "../components/Editor.vue"

  //路由对象
  const route = useRoute()
  const router = useRouter()

  //返回
  function back(){
    router.back()
  }

  //文章内容
  const article = reactive({
    name: "",
    content: "",
    category: ""
  })

  //获取数据
  async function getData(){
    if(route.query.id !== ""){
      const res = await http({
        method: "GET",
        url: "article/get_article",
        params: {
          bid: route.query.id
        }
      })
      let type = "error"
      if(res.data.code === 0){
        const {category,content,name} = res.data.data.articleList[0]
        article.name = name
        article.content = content
        article.category = category
        type = "success"
      }
      ElMessage({
        showClose: true,
        message: res.data.msg,
        center: true,
        type
      })
    }
  }

  //获取富文本中的数据
  function setContent(value){
    article.content = value
  }

  //提交按钮加载中
  const loading = ref(false)

  //表单提交
  async function submit(){
    if(article.name === "" || article.category === "" || article.content ===""){
      return ElMessage({
        showClose: true,
        message: "还有没填的内容哦！",
        center: true,
        type: "error"
      })
    }
    let type = "error"
    let url = "article/add_article"
    const data = {...article}
    //判断是添加还是修改
    if(route.query.id !== ""){
      url = "article/update_article"
      data.bid = route.query.id
    }
    loading.value = true
    //发起请求
    const res = await http({
      url,
      data,
      method: "POST"
    })
    if(res.data.code === 0){
      type = "success"
      router.back()
    }
    loading.value = false
    ElMessage({
      showClose: true,
      message: res.data.msg,
      center: true,
      type
    })
  }

  //组件挂载前
  onBeforeMount(()=>{
    getData()
  })
</script>

<style scoped>
  .addBox{
    width: 100%;
    padding: 20px;
  }
  /*按钮*/
  .btnBox{
    position: absolute;
    top: 20px;
    right: 20px;
  }
  /*表单*/
  .bookTop{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
  }
  .bookTop .topInput{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
  }
  .bookTop .topInput span{
    white-space: nowrap;
  }
</style>